<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
	  th:with="title='个人中心',active='userinfo'"
	  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!-- head 头部-->
<head th:replace="web/common/fragment::head(${title},null,'')"></head>
<body>

<div th:replace="web/layout/header::header(${active})"></div>
<!--	main	-->
<div class="fly-main" th:if="${session.sessionUser!=null}"  th:with="loginUser=${session.sessionUser}">
	<div class="layui-row clear layui-col-space15">
		<!--	left begin	-->
		<div class="layui-col-sm12 layui-col-md3">
			<div class="layui-card">
				<div class="layui-card-body" style="padding: 25px;">
					<div class="text-center layui-text">
						<div class="user-info-head" id="imgHead">
							<span th:if="${loginUser.userGrade==1}" class="vip-icon"></span>
							<img th:src="${thUtil.formatUserImage(loginUser.userImg)}"/>
						</div>
						<h2 style="padding-top: 20px;" th:class="${loginUser.userGrade==1?'color-vip':''}" th:text="${loginUser.nickName}">Serati Ma</h2>
						<p style="padding-top: 8px;">海纳百川，有容乃大</p>
					</div>
					<div class="layui-text" style="padding-top: 30px;">
						<div class="info-list-item">
							<i class="layui-icon layui-icon-username"></i>
							<p th:text="${loginUser.userName}">unknow</p>
						</div>
						<div class="info-list-item">
							<i class="layui-icon layui-icon-release"></i>
							<p th:text="${loginUser.userGrade==1?'超级VIP':loginUser.userGrade==2?'至尊VIP':'普通用户'}">论坛版主</p>
						</div>
						<div class="info-list-item">
							<i class="layui-icon layui-icon-location"></i>
							<p th:text="${loginUser.userAddress}">湖北省武汉市</p>
						</div>
					</div>
					<div class="dash"></div>
					<h3>标签</h3>
					<div class="layui-badge-list" style="padding-top: 6px;">
						<span class="layui-badge layui-bg-gray">SpringBoot</span>
						<span class="layui-badge layui-bg-gray">SpringCloud</span>
						<span class="layui-badge layui-bg-gray">系统设计</span>
						<span class="layui-badge layui-bg-gray">大帅比</span>
						<span class="layui-badge layui-bg-gray">Java</span>
						<span class="layui-badge layui-bg-gray">海纳百川</span>
					</div>
				</div>
			</div>
		</div>
		<!--	 left end		-->
		<!--		right begin			-->
		<div class="layui-col-sm12 layui-col-md9">
			<div class="layui-card">
				<div class="layui-card-body" style="min-height: 600px;box-sizing: border-box;padding-top: 5px;">

					<div class="layui-tab layui-tab-brief user-tab">
						<ul class="layui-tab-title">
							<li ><a href="/user/config">基本信息</a></li>
							<li class="layui-this"><a href="/user/oauth">账号绑定</a></li>
							<li><a href="/user/oauth">浏览记录</a></li>
							<li><a href="/user/post">发帖记录</a></li>
							<li><a href="/user/comment">评论记录</a></li>
							<li><a href="/user/loginLog">登陆日志</a></li>
						</ul>
					</div>
					<!--	账号绑定		-->
					<div class="bd-list layui-text user-info-content">
						<div class="bd-list-item">
							<div class="bd-list-item-content">
								<div class="bd-list-item-lable">密保手机</div>
								<div class="bd-list-item-text">已绑定手机：138****8293</div>
							</div>
							<a class="bd-list-item-oper">修改</a>
						</div>
						<div class="bd-list-item">
							<div class="bd-list-item-content">
								<div class="bd-list-item-lable">绑定账号</div>
								<div class="bd-list-item-text">已绑定账号：<th:block th:text="${loginUser.userName}"></th:block></div>
							</div>
							<!--<a class="bd-list-item-oper">修改</a>-->
						</div>
						<div class="bd-list-item">
							<div class="bd-list-item-img">
								<i class="layui-icon layui-icon-login-weibo"
								   style="color: #E6162D;font-size: 48px;"></i>
							</div>
						<th:block th:if="${authMap.containsKey('WEIBO')}">
							<div class="bd-list-item-content">
								<div class="bd-list-item-lable">绑定微博</div>
								<div class="bd-list-item-text">当前已绑定微博账号：@
									<th:block th:text="${authMap.WEIBO.nickName}"></th:block></div>
							</div>
							<a class="bd-list-item-oper" href="/oauth/revoke/weibo">解除绑定</a>
						</th:block>
						<th:block th:if="${not #maps.containsKey(authMap,'WEIBO')}">
							<div class="bd-list-item-content">
								<div class="bd-list-item-lable">绑定微博</div>
								<div class="bd-list-item-text">当前未绑定微博账号</div>
							</div>
							<a class="bd-list-item-oper" href="/oauth/render/weibo">绑定</a>
						</th:block>

						</div>
						<div class="bd-list-item">
							<div class="bd-list-item-img">
								<i class="layui-icon layui-icon-cellphone"
								   style="color: #3cd7bc;font-size: 48px;"></i>
							</div>
							<div class="bd-list-item-content">
								<div class="bd-list-item-lable">绑定手机</div>
								<div class="bd-list-item-text">当前未绑定手机号</div>
							</div>
							<a class="bd-list-item-oper">绑定</a>
						</div>
						<div class="bd-list-item" >
							<div class="bd-list-item-img">
								<i class="layui-icon layui-icon-login-qq"
								   style="color: #3492ED;font-size: 48px;"></i>
							</div>
							<th:block th:if="${authMap.containsKey('QQ')}">
								<div class="bd-list-item-content">
									<div class="bd-list-item-lable">绑定QQ</div>
									<div class="bd-list-item-text">当前已绑定QQ账号：
										<th:block th:text="${authMap.QQ.nickName}"></th:block></div>
								</div>
								<a class="bd-list-item-oper" href="/oauth/revoke/qq">解除绑定</a>
							</th:block>
							<th:block th:if="${not #maps.containsKey(authMap,'QQ')}">
								<div class="bd-list-item-content">
									<div class="bd-list-item-lable">绑定QQ</div>
									<div class="bd-list-item-text">当前未绑定QQ账号</div>
								</div>
								<a class="bd-list-item-oper" href="/oauth/render/qq">绑定</a>
							</th:block>
						</div>
						<div class="bd-list-item">
							<div class="bd-list-item-img">
								<i class="layui-icon layui-icon-login-wechat"
								   style="color: #4DAF29;font-size: 48px;"></i>
							</div>
							<th:block th:if="${authMap.containsKey('WEIXIN')}">
								<div class="bd-list-item-content">
									<div class="bd-list-item-lable">绑定微信</div>
									<div class="bd-list-item-text">当前已绑定微信账号：
										<th:block th:text="${authMap.WEIXIN.nickName}"></th:block></div>
								</div>
								<a class="bd-list-item-oper" href="/oauth/revoke/weixin">解除绑定</a>
							</th:block>
							<th:block th:if="${not #maps.containsKey(authMap,'WEIXIN')}">
								<div class="bd-list-item-content">
									<div class="bd-list-item-lable">绑定微信</div>
									<div class="bd-list-item-text">当前未绑定微信账号</div>
								</div>
								<a class="bd-list-item-oper" href="/oauth/render/weixin">绑定</a>
							</th:block>
						</div>
					</div>



				</div>
			</div>
		</div>
		<!--	right end		-->
	</div>


</div>
<!--	main end	-->
<!--	底部版权		-->
<div th:replace="web/layout/footer::footer"></div>
<!--	搜索		-->
<div th:replace="web/layout/common::pop-search"></div>
<!--	右边工具栏	-->
<div th:replace="web/layout/common::right-bar"></div>
<!--	引入JS	-->
<div th:replace="web/common/fragment::js"></div>

<script type="text/javascript" >
	layui.use(['layer', 'form', 'element', 'upload','table','util'], function () {
		var $ = layui.jquery;
		var layer = layui.layer;
		var form = layui.form;
		var element = layui.element;
		var upload = layui.upload;
		var table = layui.table;
		var util = layui.util;

		/*upload.render({
			elem: '#imgHead',
			url: '', // 上传接口
			done: function (res) {
				// 上传完毕回调
			},
			error: function () {
				// 请求异常回调
			}
		});*/
		/*$('#qqBind').click(function () {
			layer.open({
				type: 2,
				title: 'QQ 登陆',
				offset: '80px',
				area: ['800px', '500px'],
				content: '/oauth/render/qq'
			});
		})*/
        var state = B.getUrlParam("state");
        if (state == 'ok') {
            B.info("绑定成功");
        }else if (state == 'error_701') {
            B.error("当前绑定账号已经绑定了其他账号");
        }else if (state == 'error') {
            B.error("绑定失败");
        }else if (state == 'ok_201') {
			B.info("解除成功");
		}else if (state == 'error_702') {
			B.error("解除失败");
		}
	});
</script>
<div th:replace="web/common/fragment::post"></div>

</body>
</html>
